<template>
  <div class="user-bar">

    <div class="user-bar_left d-flex flex-row align-items-center">
      <div @click="retrunHome()" class="retrunIco d-flex flex-row align-items-center m-2" v-if="PjName"><img
          src="@/assets/image/retrun.png"></div>
      {{ PjName }}
    </div>
    <div class="user-bar_right">

      <div @click="aboutVisible = true" style=" cursor: pointer; ">
        关于
      </div>


      <div @click="quit" style="cursor: pointer;margin-top: 5px;">
        <el-icon :size="26" class="me-3">
          <SwitchButton />
        </el-icon>
      </div>

      <div @click="clickUsername" class="username">
        <el-avatar class="me-2" :icon="UserFilled" />
        <span class="me-2">{{ username }}</span>
      </div>

      <!-- <div @click="warning" style="cursor: pointer">
        <el-icon :size="30" class="me-3">
          <Bell />
        </el-icon>
      </div> -->
    </div>
  </div>
  <el-dialog v-model="aboutVisible" style="width: 600px;height: 300px;">
    <div style="background-color: #ffffff;;    border-radius: 22px 22px 0px 0px; " class="item_about">
      
    </div>
    <!-- 登录模式 -->


    <!-- <div class="item_about">
      <img src="@/assets/image/logo_oringe.png" style="width: 500px;height: 250px;" />
      <span >
        版本号 1.0.1 2023年3月30日

      </span>
    </div> -->




  </el-dialog>

  <!-- <el-dialog v-model="warningVisible" title="异常预警信息" center width="400px">
    <div class="warning ">
      <el-badge :value="12" class="item">
        <el-button style="width: 100%">项目1</el-button>
      </el-badge>
      <el-badge :value="92" class="item">
        <el-button style="width: 100%">项目2</el-button>
      </el-badge><el-badge :value="5" class="item">
        <el-button style="width: 100%">项目3</el-button>
      </el-badge><el-badge :value="44" class="item">
        <el-button style="width: 100%">项目4</el-button>
      </el-badge>

    </div>
  </el-dialog> -->

  <el-dialog v-model="quitVisible" title="退出登录" center width="400px">
    <div class="fs-5 w-75 m-1 text-primary">确定退出登录？</div>

    <div class="mt-4 d-flex justify-content-center">
      <el-button type="primary" @click="confirmQuit">确认</el-button>
      <el-button @click="quitVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>
  
<script setup lang="ts">

import { UserFilled } from "@element-plus/icons-vue";
import { Avatar } from "@element-plus/icons-vue";
import { stringifyExpression } from "@vue/compiler-core";
import { useStore } from "vuex";

import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
import { ComponentInternalInstance } from "vue";
const router = useRouter();
const store = useStore();
const pjId = ref(store.getters["getProjectName"])
const PjName = ref(store.getters["getProjectName"])
const username = ref(store.getters["getFullname"])
const aboutVisible = ref(false)

const props = defineProps({

  userInfo: {
    type: Object,
    default: () => ({}),
  },
});

const clickUsername = () => {
  console.log("clickUsername");
};
//  poxy 为全局实例化对象
const proxy: any = (getCurrentInstance() as ComponentInternalInstance).proxy
const retrunHome = async () => {
  const token = localStorage.getItem("Authorization");
  if (token) {
    let reslut = await proxy.$api.user.checkToken()
    if (reslut.code == 200) {
      store.commit("SET_USERINFO", reslut.data.uUser);
      hanlderUserCenterMeun(reslut.data.menuList)
    }
  }

}

const hanlderUserCenterMeun = (menuList: string) => {

  let menueItem: Array<any> = [];
  let tempMenuList = JSON.parse(menuList).data
  console.log('menuList', tempMenuList);

  tempMenuList.forEach((element: any) => {
    console.log(element);
    if (element.menuState == 0) {
      let item = {
        id: element.id,
        label: element.textCh,
        frontendMenuUrl: element.routeUrl,
        frontendMenuIcon: element.menuIcon,
        children: [],
        funbtn: []
      }
      if (element.children) {
        element.children.forEach((funBtn: any) => {
          (item.funbtn as any).push(funBtn.buttonFlag)
        })
      }
      menueItem.push(item)
    }
  });
  const order = ['项目列表', '项目统计', '企业管理', '规范管理', '字典配置'];

  const compare = (a: any, b: any) => {
    const indexA = order.indexOf(a.label);
    const indexB = order.indexOf(b.label);
    return indexA - indexB;
  };

  menueItem.sort(compare);
  console.log('menueItem', menueItem);

  store.commit("SET_MUENU", menueItem);
  console.log(menueItem[0].id);
  console.log(menueItem[0]);
  store.commit("SET_MENULISTINDEX", JSON.stringify(menueItem[0].id))
  router.push(menueItem[0].frontendMenuUrl)
}
const quitVisible = ref(false);
const quit = () => {
  console.log("quit");
  quitVisible.value = true;
};
const warningVisible = ref(false);

const warning = () => {
  warningVisible.value = true;
};

const confirmQuit = () => {
  localStorage.clear();
  router.push("/");
  quitVisible.value = false;
};


watch(() =>
  router.currentRoute.value.path,
  (toPath) => {
    //要执行的方法
    if (toPath.indexOf('/home/') > -1) {
      PjName.value = ''
      store.commit("SET_PRONAME", "")
    }

    if (toPath.indexOf('/project/') > -1) {
      PjName.value = store.getters["getProjectName"]
    }
  }, { immediate: true, deep: true })


</script>
  
<style scoped lang="scss">
.item_about {

  width: 500px;
  height: 200px;

  span {
    font-size: 30px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.retrunIco {
  cursor: pointer;
}

.user-bar {
  width: calc(100% - 50px);
  height: 60px;
  left: 25px;
  top: 20px;
  background-color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // flex-direction: row-reverse;
  &_right {
    display: flex;
    width: 350px;
    align-items: center;
    flex-direction: row-reverse;
    border-radius: 12px;

    div {
      margin: 0 10px;
      text-align: center;

      svg {
        text-align: center;
      }
    }
  }

  &_left {
    margin-left: 20px;
    width: auto;
    font-size: 20px;
    font-family: PingFang SC-Heavy, PingFang SC;
  }
}

.warning {
  display: flex;
  flex-direction: column;

  .item {
    margin: 10px 0;
  }
}

.username {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
  